<template>
  <div>
    <el-tree
      :data="data"
      show-checkbox
      default-expand-all
      node-key="id"
      ref="tree"
      :default-checked-keys="myPermiss"
      highlight-current
      :props="defaultProps"
      @check-change="handleCheckChange"
    ></el-tree>

    <div class="buttons">
      <!-- <el-button @click="getCheckedNodes">通过 node 获取</el-button> -->
      <el-button @click="getCheckedKeys">保存</el-button>
      <!-- <el-button @click="setCheckedNodes">通过 node 设置</el-button>
      <el-button @click="setCheckedKeys">通过 key 设置</el-button> -->
      <el-button @click="resetChecked">清空</el-button>
    </div>
  </div>
</template>
<script>
import permissionApi from "@/api/settings/permission";
import roleApi from "@/api/settings/role";
import rolePerApi from "@/api/settings/rolePermiss"
export default {
  data() {
    return {
      id: this.$route.query.id,
      myPermiss:[],
      data: [
        {
          id: 1,
          label: "一级 1",
          children: [
            {
              id: 4,
              label: "二级 1-1",
              children: [
                {
                  id: 9,
                  label: "三级 1-1-1"
                },
                {
                  id: 10,
                  label: "三级 1-1-2"
                }
              ]
            }
          ]
        },
        {
          id: 2,
          label: "一级 2",
          children: [
            {
              id: 5,
              label: "二级 2-1"
            },
            {
              id: 6,
              label: "二级 2-2"
            }
          ]
        },
        {
          id: 3,
          label: "一级 3",
          children: [
            {
              id: 7,
              label: "二级 3-1"
            },
            {
              id: 8,
              label: "二级 3-2"
            }
          ]
        }
      ],
      defaultProps: {
        children: "children",
        label: "label"
      }
    };
  },
  created() {
    this.fetchData();

    this.getpermissData(this.id);
  },
  methods: {
    fetchData() {
      permissionApi.getAllPermissionTree().then(response => {
        const resp = response.data;
        this.data = resp.data;
      });
    },
// 得到权限id
    getpermissData(roleId){
      rolePerApi.getListByRole(roleId).then(response=>{

        console.log(response);
        this.myPermiss=response.data.data;
        console.log(this.myPermiss);
      })
    },
    handleCheckChange() {
      let res = this.$refs.tree.getCheckedNodes();
      let arr = [];
      res.forEach(item => {
        arr.push(item.id);
      });
      console.log(res);
    },

    getCheckedNodes() {
      console.log(this.$refs.tree.getCheckedNodes());
    },
    getCheckedKeys() {
      console.log(this.$refs.tree.getCheckedKeys());
      roleApi
        .setPermission(this.id, this.$refs.tree.getCheckedKeys())
        .then(response => {
          const resp = response.data;
          console.log(resp);
          if (resp.code == 0) {
            this.$router.replace({
              path: "/settings/roleManage"
            });
          }
        });
    },
    // setCheckedNodes() {
    //   this.$refs.tree.setCheckedNodes([
    //     {
    //       id: 5,
    //       label: "二级 2-1"
    //     },
    //     {
    //       id: 9,
    //       label: "三级 1-1-1"
    //     }
    //   ]);
    // },
    // setCheckedKeys() {
    //   this.$refs.tree.setCheckedKeys([3]);
    // },
    resetChecked() {
      this.$refs.tree.setCheckedKeys([]);
    }
  }
};
</script>